<template>
  <view class="goods-list">
    <view class="goods-item">
      <view class="item-row1"><text>{{ orderDetail.orderType | formatePay }}</text></view>
      <view class="item-row2" v-for="(item,index) in orderDetail.list" :key='index'>
        <view class="item-middle">
			<image :src="item.thumbnail" style="width: 100%;height: 100%;" mode=""></image>
		</view>
        <view class="item-right">
          <text class="item-title">{{item.name}}</text>
          <text class="item-volume">
            <text>数量:{{item.count}}</text>
            <text>规格：{{item.standardName}}</text>
          </text>
          <text class="item-money">
            <text class="money" v-if="item.price>0">￥{{item.price}}/</text>
            <text class="point" v-if="item.score>0">{{item.score}}积分</text>
          </text>
        </view>
      </view>
    </view>
    <view class="goods-pay">
      <view class="row1">
        <text class="goodsprice">商品价格</text>
        <text class="money">￥{{orderDetail.finishCashAmount}}</text>
      </view>
      <view class="row2">
        <text class="spend">运费</text>
        <text class="free">免配送费</text>
      </view>
      <view class="row3">
        <text class="paypoint">支付积分</text>
        <text class="point">{{orderDetail.finishScoreAmount}}积分</text>
      </view>
    </view>
    <view class="goods-info">
      <view class="info-top">
        <view class="row-header">
          <text>订单信息</text>
        </view>
        <view class="row1 flex_r_between">
          <text>订单编号</text>
          <text>{{orderDetail.orderNo}}</text>
        </view>
        <view class="row2 flex_r_between">
          <text>订单日期</text>
          <text>{{orderDetail.createdOn}}</text>
        </view>
        <view class="row3 flex_r_between">
          <text>支付方式</text>
          <text>{{orderDetail.payCategory == 10 ? '余额支付' : orderDetail.payCategory == 20 ? '微信支付' : '购物券支付'}}</text>
        </view>
      </view>
      <view class="info-top">
        <view class="row-header">
          <text>收货地址</text>
        </view>
        <view class="row1 flex_r_between">
          <text>收件人</text>
          <text>{{orderDetail.name}}</text>
        </view>
        <view class="row2 flex_r_between">
          <text>手机号</text>
          <text>{{orderDetail.phone}}</text>
        </view>
        <view class="row3 flex_r_between">
          <text>收货地址：</text>
          <text>{{orderDetail.pca}}/{{orderDetail.address}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-goods',
  data() {
    return {
		orderDetail : {}
	};
  },
  filters: {
  	formatePay(val) {
  		switch (val) {
  			case 10:
  				return '待支付';
  				break;
  			case 20:
  				return '待发货';
  				break;
  			case 30:
  				return '待收货';
  				break;
  			case 40:
  				return '已签收';
  				break;
  			case 50:
  				return '系统取消';
  				break;
  			case 60:
  				return '买家取消';
  				break;
  		}
  	}
  },
  onLoad(e) {
  	this.$ajax('api/Order/QueryDetail',{id:e.id}).then(res => {
		this.orderDetail = res.Data
	})
  }
};
</script>

<style lang="scss">
.goods-list {
  width: 100vw;
  min-height: 100vh;
  background-color: #e9eaed;
  display: flex;
  flex-direction: column;
  align-items: center;
  .goods-item {
    width: 690rpx;
    margin: 0 30rpx;
    height: 314rpx;
    background-color: #ffffff;
    margin-top: 25rpx;
    border-radius: 26rpx;
    display: flex;
    position: relative;
    flex-direction: column;
    .item-row1 {
      margin-top: 30rpx;
      // height: 88rpx;
      padding-bottom: 30rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #c4c4c4;
      text {
        font-size: 30rpx;
        font-weight: 700;
        margin-left: 30rpx;
        color: #333333;
      }
    }
    .item-row2 {
      display: flex;
      .item-middle {
        width: 150rpx;
        height: 150rpx;
        background-color: #aeaeae;
        margin-top: 25rpx;
        margin-left: 35rpx;
      }
      .item-right {
        display: flex;
        flex-direction: column;
        margin-left: 47rpx;
        .item-title {
          color: #333;
          font-size: 26rpx;
          margin-top: 36rpx;
        }
        .item-money {
          font-size: 26rpx;
          margin-top: 10rpx;
          display: flex;
          // margin-bottom: 21rpx;
          .money {
            color: #333;
          }
          .point {
            color: #e0bc60;
            margin-right: 33rpx;
          }
        }
        .item-volume {
          color: #999999;
          font-size: 24rpx;
          display: flex;
          margin-top: 20rpx;
          text {
            margin-right: 8rpx;
          }
        }
      }
    }
  }

  .goods-pay {
    width: 690rpx;
    height: 270rpx;
    background-color: #ffffff;
    margin: 0 30rpx;
    border-radius: 26rpx;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 33rpx 28rpx;
    box-sizing: border-box;
    .row1 {
      display: flex;
      justify-content: space-between;
      text {
        color: #333333;
        font-size: 28rpx;
      }
    }
    .row2 {
      display: flex;
      justify-content: space-between;
      // border: 1rpx solid #c4c4c4;
      text {
        color: #333333;
        font-size: 28rpx;
      }
    }
    .row3 {
      display: flex;
      justify-content: space-between;
      .paypoint {
        font-weight: 700;
        color: #333333;
        font-size: 28rpx;
      }
      .point {
        color: #e0bc60;
        font-weight: 700;
        font-size: 28rpx;
      }
    }
  }
  .goods-info{
    margin-top: 30rpx;
    // height: 578rpx;
	// margin: 0 30rpx;
	border-radius: 20rpx;
    width: 93%;
    // padding: 0 32rpx;
    background-color: #FFFFFF;
    text {
      font-size: 26rpx;
      color: #333;
    }
    .info-top {
      margin: 0 32rpx;
      display: flex;
      flex-direction: column;
      // border-bottom: 1rpx solid #C4C4C4;
      .row-header {
        display: flex;
        margin: 38rpx 0;
        text {
          color: #333333;
          font-size: 30rpx;
          font-weight: 700;
        }
      }
      .row1 {
        display: flex;
        margin-bottom: 22rpx;
      }
      .row2 {
        display: flex;
        margin-bottom: 22rpx;
      }
      .row3 {
        display: flex;
        margin-bottom: 22rpx;
      }
    }
  }
}
</style>
